<template>
	<div id="collect">
		<div id="titleHeader">
			<div class="myCollect">
				<span class="shop" @click="handleClick" :class="flag==1?'active':''">商品</span>
				<span class="mark" @click="handleMark" :class="flag ==2?'active':''">店铺</span>
				<span class="edit" @click="goEdit" v-if="edit">编辑</span>
				<span class="edit" @click="yes" v-if="edit2">完成</span>
			</div>
			<!------------------ 判断商品显示隐藏 ------------------------>
			<div v-if="shop" class="shopListContainer" :style="edit2==true?'margin-bottom: 1rem;margin-top:1rem;overflow: hidden':'margin-top:1rem;overflow: hidden'">
				<div class="cutDetail" v-for="(x,y) in collectList" :id="x.pro_id" :id_type="x.id_type" @click="goNewDetail(x.pro_id,x.id_type)">
					<img v-if="shows" @click="goodsChange($event)" class="imag" src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected.png" :id="x.pro_id">
					<ul class="photo">
						<li>
							<img class="shopImg" :src="x.pro_image">
							<!--商品已售罄和已下架显示-->
							<!--<img class="stopImg" v-if="closeOut" src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/imgChange/sold_out.png">-->
							<!--<img class="stopImg" v-if="deleteOut" src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/imgChange/under_shelf.png">-->
						</li>
					</ul>
					<ul class="cut-right" :style="editSuccess==true?'width:4rem;':'width:4.5rem;'">
						<li class="one">{{x.pro_title}}</li>
						<li class="two"><span class="icons">¥</span>{{x.pro_price}}&nbsp;</li>
						<li class="three">已砍<span class="now">{{x.sellNum}}</span>件</li>
					</ul>
				</div>
			</div>
			<div id="showguess" v-else :style="edit2==true?'margin-top: 1rem;margin-bottom:1rem;':'margin-top: 1rem'" >
				<div class="allGuess" v-for="x in collectList">
					<img v-if="showChange" @click="shopChange($event)" class="imag" src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected.png" :id="x.id">
					<img class="headImg" :src="x.logo">
					<ul class="guessUl">
						<li class="guessName">{{x.name}}</li>
						<li class="guessNumber">已砍{{x.sellNum}}件</li>
					</ul>
					<button :id="x.id" @click="goBussiness(x.id)">进店逛逛</button>
				</div>
			</div>
		</div>
	<!------------------ 没有收藏页面 ------------------------>
		<div id="coupon-empty" v-if="show" :style="{height:height}">
			<img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/collect/empty_goods.png"/>
			<span class="noVoucher">还没有任何收藏呢</span>
			<button class="btn" @click="goHome">逛逛首页</button>
		</div>
	<!------------------ 编辑 => 完成 ------------------------>
		<div class="success" v-if="editSuccess">
			<ul @click="goAlls($event,flag)">
				<li class="radius">
                    <img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected.png"></li>
				<li class="allX">全选</li>
			</ul>
			<button class="sBtn" @click="goDelete(flag)">删除</button>
		</div>
	<!------------------ 遮罩层 ------------------------>
	<div class="opaction" v-if="showopac"></div>
	<div class="textOpac" v-if="showTeo">
		<p>确定要取消收藏所选{{ test }}吗</P>
		<div class="sBtn">
			<button @click="goLast" style="border-right:1px solid #e6e6e6">取消</button>
			<button @click="goSucc(flag)">确定</button>
		</div>
	</div>
	</div>

</template>

<script>
    import config from "../config/config.js";
    import share from "../share/share.js";
    import MtaH5 from 'mta-h5-analysis';
	export default{
        components:{
	        "v-alert":alert
		},
		 data(){
            return{				// 默认
               	show:Boolean,  	// 没有收藏页面隐藏
				shop:true,		//按钮商品
				success:true,	//猜你喜欢
				edit:false,		//编辑按钮
				edit2:false,	//完成按钮
				flag:1,			//商品按钮样式
				editSuccess:false,
                collectList:Object,
				change:1,
				showChange:false,
				goAll:1,
				showopac:false,
				showTeo:false,
				shows:false,
				shopIdList:[],
				goodsIdList:[],
                height:'',
				test:''
            }
        },
		methods:{
			goDelete(type){
                if(type==2){
                    this.test='店铺'
                }else{
                    this.test='商品'
                }
				this.showopac = true;
				this.showTeo = true;

			},
			goSucc(type){
			    this.edit2 = false;
                this.shows = false;
                this.showChange = false;
				if(type==2){
                    var value=JSON.stringify({"values":this.shopIdList,"type":type,"token":localStorage.getItem('token')}),
                        key=demo(value);
				}else{
                    var value=JSON.stringify({"values":this.goodsIdList,"type":type,"token":localStorage.getItem('token')}),
                        key=demo(value);
				}
                axios.post('/Home/Collection/DeleteCollection',{
                        value:value,
                        key:key
                },config)
                    .then(function(response) {
                       if(response.data.code==200){
                           this.showopac=false;
                           this.showTeo=false;
                           this.editSuccess=false;
                           this.getCollectionList(this.flag)
					   }
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
			},
			goLast(){
				this.showopac = false,
				this.showTeo = false
			},
			goAlls($event,type){
			    if(type==2){
                    var Aimgs=document.querySelectorAll('img.imag');
                    var Imgurl=$event.currentTarget.getElementsByTagName('img')[0].getAttribute('src');
                    var arr=[];
                    if(Imgurl=='https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected.png'){
                        $event.currentTarget.getElementsByTagName('img')[0].setAttribute('src','https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/checked_b.png');
                        for(var i=0;i<Aimgs.length;i++){
                            Aimgs[i]["src"]='https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/checked_b.png';
                            arr.push(Aimgs[i]['id']);
                            this.$set(this.shopIdList,i,arr[i])
                        }
                    }else{
                        for(var i=0;i<Aimgs.length;i++){
                            Aimgs[i]["src"]='https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected.png';
                            arr.pop(Aimgs[i]['id']);
                            this.$delete(this.shopIdList,0);
                        };
                        $event.currentTarget.getElementsByTagName('img')[0].setAttribute('src','https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected.png')

                    }
				}else{
                    var Aimgs=document.querySelectorAll('img.imag');
                    var Imgurl=$event.currentTarget.getElementsByTagName('img')[0].getAttribute('src');
                    var arr=[];
                    if(Imgurl=='https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected.png'){
                        $event.currentTarget.getElementsByTagName('img')[0].setAttribute('src','https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/checked_b.png');
                        for(var i=0;i<Aimgs.length;i++){
                            Aimgs[i]["src"]='https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/checked_b.png';
                            arr.push(Aimgs[i]['id']);
                            this.$set(this.goodsIdList,i,arr[i])
                        }
                    }else{
                        for(var i=0;i<Aimgs.length;i++){
                            Aimgs[i]["src"]='https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected.png';
                            arr.pop(Aimgs[i]['id']);
                            this.$delete(this.goodsIdList,0);
                        };
                        $event.currentTarget.getElementsByTagName('img')[0].setAttribute('src','https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected.png')

                    }
				}

			},
			shopChange($event){
                $event.stopPropagation();
				var Imgurl=$event.currentTarget.getAttribute('src');
				var id=$event.currentTarget.getAttribute('id');
				if(Imgurl=='https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected.png'){
                    $event.currentTarget.setAttribute('src','https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/checked_b.png');
                    this.shopIdList.push(id);
				}else{
                    this.shopIdList.pop(id);
                    $event.currentTarget.setAttribute('src','https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected.png')
				}
			},
			goodsChange($event){
                $event.stopPropagation();
                var Imgurl=$event.currentTarget.getAttribute('src');
                var id=$event.currentTarget.getAttribute('id');
                if(Imgurl=='https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected.png'){
                    $event.currentTarget.setAttribute('src','https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/checked_b.png');
                    this.goodsIdList.push(id);
                }else{
                    this.goodsIdList.pop(id);
                    $event.currentTarget.setAttribute('src','https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected.png')
                }
			},
			goHome(){
				this.$router.push("/home/index/00");
			},
			handleClick(){
				this.showChange = false,
				this.shop = true,
				this.flag = 1,
				this.editSuccess = false,
				this.shows = false,
				this.change = 1,
				this.edit2 = false,
                this.getCollectionList(this.flag)
			},
			handleMark(){
				this.change = 1,
				this.showChange = false,
				this.shop = false,
				this.flag = 2,
				this.editSuccess = false,
                this.edit2 = false,
                this.getCollectionList(this.flag)
            },
			goEdit(){
				this.success = false,
				this.edit = false,
				this.edit2 = true,
				this.editSuccess = true,
				this.showChange = true,
				this.shows = true,
				this.shopIdList=[],
				this.goodsIdList=[]
			},
			yes(){
				this.edit2 = false,
				this.edit = true,
				this.success = true,
				this.editSuccess = false,
				this.showChange = false,
				this.change = 1,
				this.shows = false,
                this.shopIdList=[],
                this.goodsIdList=[]
            },
			change:function(a){
    			this.flag=a;
  			},
			getCollectionList(type){
                var value=JSON.stringify({"page":"1","type":type,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/Collection/GetCollectionList',{
                        value:value,
                        key:key
                },config)
                    .then(function(response) {
                        if(response.data.code==200){
                            this.collectList=response.data.data.data;
                            if(response.data.data.data==''){
                                this.$nextTick(function () {
                                    this.edit=false;
                                    this.edit2=false;
                                    this.show=true
                                })
							}else{
                                this.$nextTick(function () {
                                    this.edit=true;
                                    this.show=false
                                })
							}
						}
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
			},
            goNewDetail(id,type){
                this.$router.push('/newDetail/'+id+'/'+type)
            },
            goBussiness(id){
                this.$router.push('/business/'+id);
            }
		},
		activated(){
		     this.getCollectionList(this.flag);
		     share({});
			 MtaH5.init({
                "sid":'500594815',
                "cid":'500595819',
                "autoReport":0,
                "senseHash":0,
                "senseQuery":0,
                "performanceMonitor":0,
                "ignoreParams":[]
            });
             MtaH5.pgv();
		},
        deactivated(){
		     this.$destroy(true)
		},
		mounted(){
		     this.$nextTick(function(){
                var wHeight=document.documentElement.clientHeight;
                var titHeight=document.getElementById('titleHeader').offsetHeight;
               this.height=(wHeight-titHeight)+'px'
			 })
		}
	}
</script>


<style>
</style>